﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>角色管理</title>
    <link href="../lib/layui/css/layui.min.css" rel="stylesheet" />
    <link href="../x-admin/css/font.css" rel="stylesheet" />
    <link href="../x-admin/css/xadmin.css" rel="stylesheet" />
    <script type="text/javascript" src="../lib/Base64/base64.min.js"></script>
    <script type="text/javascript" src="../linq.js/linq.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/cookie/cookie.js"></script>
</head>
<body>
    <div class="layui-card">
        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="roleSearchForm">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input class="layui-input" name="name" type="text" autocomplete="off" />
                    </div>
                </div>

                <div class="layui-inline">
                    <a class="layui-btn" href="javascript:;" lay-submit lay-filter="load" id="load">搜索</a>
                </div>
            </div>
        </form>
        <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>
    </div>
    <script type="text/html" id="barroletab">
        <a title="权限管理" href="javascript:;" lay-event="authority"><i class="layui-icon">&#xe716;</i>权限管理</a>
        <a title="编辑" href="javascript:;" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
        <a title="删除" href="javascript:;" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
    </script>
    <script type="text/html" id="roletoolbar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-xs" lay-event="create">添加</a>
        </div>
    </script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            $tab = table.render({
                id: 'roleTable',
                elem: '#roleTable',
                skin: 'row',
                url: localStorage.getItem('hosttingaddr') + '/api/role/index', //数据接口
                headers: {
                    user: getCookie("userinfo")
                },
                page: true,
                toolbar:'#roletoolbar',
                cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, fixed: 'left', align: 'center' },
                    { field: 'code', title: 'CODE', align: 'center' },
                    { field: 'name', title: '名称', align: 'center' },
                    { field: 'dName', title: '部门名称', align: 'center' },
                    { fixed: 'right', title: '操作', align: 'center', toolbar: '#barroletab' }
                ]],
                where: getWhere()
            });
            //监听表工具事件
            table.on('toolbar(roleTable)', function (obj) {
                var event = obj.event;
                switch (event) {
                    case "create":
                        layer.open({
                            type: 2,
                            title: '添加角色',
                            maxmin: true,
                            shadeClose: false, //点击遮罩关闭层
                            area: ['600px', '420px'],
                            content: 'rolecreate.html'// iframe链接地址
                        });
                        break;
                    default: break;
                }
            });

            //监听行工具事件
            table.on('tool(roleTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent == 'authority') {
                    layer.open({
                        type: 2,
                        title: '角色权限',
                        maxmin: true,
                        shadeClose: false, //点击遮罩关闭层
                        area: ['600px', '600px'],
                        content: 'roleauthority.html' + '?rid=' + data.id// iframe链接地址
                    });

                }
                else if (layEvent == 'edit') {
                    layer.open({
                        type: 2,
                        title: '编辑角色',
                        maxmin: true,
                        shadeClose: false, //点击遮罩关闭层
                        area: ['600px', '420px'],
                        content: 'roleedit.html' + '?rid=' + data.id// iframe链接地址
                    });
                }
                else if (layEvent == "delete") {
                    layer.confirm('确认要删除吗？', function (index) {
                        //发异步删除数据
                        layui.$.ajax({
                            type: "post",
                            url: localStorage.getItem('hosttingaddr') + '/api/role/deleterole?rid=' + data.id,
                            success: function (data) {
                                layer.msg('已删除!', { icon: 1, time: 1000 });
                                table.reload("roleTable");
                                layer.close(index);
                            }
                        });

                    });
                }
            });
            layui.form.on("submit(load)", function () {
                var where = getWhere();
                $tab.reload({
                    where: where,
                    page: { curr: 1 }
                });
                return false;
            });
            function getWhere() {
                var where = layui.form.val("roleSearchForm");
                return where;
            }
        })
    </script>
</body>
</html>
